<!-- 个人信息 -->
<template>
	<view class="update-pass-page">
		<view class="center-content">
			<view class="imgs">
				<image width="80" height="80" src="../../static/doc.png" />
				<view @click="gologin">
					<span>{{name}}</span><br>
					<p>用户编码:{{id}}</p>
				</view>
			</view>
		</view>
		<!-- 其它 -->
		<view class="root-wrap">
			<!-- 个人信息 -->
			<navigator class="mine-item" url="/pages/personal-data/personal-data" open-type="navigate"  >
				<view style="display: flex;align-items: center;">
					<van-icon name="user-circle-o" size="20"/>
					<text style="font-size: 30rpx;margin-left: 20rpx;">个人信息</text>
				</view>
				<van-icon name="arrow" />
			</navigator>
			
			<!-- 安全中心  navigator路径跳转 open-type跳转方式：navigate（默认值）-->
			<navigator class="mine-item" url="/pages/manage/manage" 
			open-type="navigate" style="border-bottom: 1px solid #ccc;">
				<view style="display: flex;align-items: center;">
					<van-icon name="shield-o" size="20"/>
					<text style="font-size: 30rpx;margin-left: 20rpx;">安全中心</text>
				</view>
				<van-icon name="arrow" />
			</navigator>
			<!-- 隐私协议 -->
			<navigator class="mine-item" url="/pages/agreement/agreement" 
			open-type="navigate" style="border-bottom: 1px solid #ccc;">
				<view style="display: flex;align-items: center;">
					<van-icon name="closed-eye" size="20"/>
					<text style="font-size: 30rpx;margin-left: 20rpx;">隐私协议</text>
				</view>
				<van-icon name="arrow" />
			</navigator>
			<!-- 用户协议 -->
			<navigator class="mine-item" url="/pages/agreement/agreement"
			open-type="navigate" style="border-bottom: 1px solid #ccc;">
				<view style="display: flex;align-items: center;">
					<van-icon name="manager-o" size="20"/>
					<text style="font-size: 30rpx;margin-left: 20rpx;">用户协议</text>
				</view>
				<van-icon name="arrow" />
			</navigator>
			<!-- 其它协议 -->
			<navigator class="mine-item" url="/pages/agreement/agreement"
			open-type="navigate" style="border-bottom: 1px solid #ccc;">
				<view style="display: flex;align-items: center;">
					<van-icon name="description" size="20"/>
					<text style="font-size: 30rpx;margin-left: 20rpx;">其它协议</text>
				</view>
				<van-icon name="arrow" />
			</navigator>
			<!-- 退出按钮 -->
			<van-button type="primary" size="large" @click="outlogin">退出登录</van-button>
		</view>
		
	</view>
</template>

<script setup>
import {ref} from 'vue'
import {useStore} from 'vuex'
let store = useStore()
let id = ref(store.state.uid)
let name = ref(store.state.name)
let home = ref(store.state.home)

function outlogin(){
	uni.showModal({
		content: '确定要退出登录吗？',
		success: res => {
			if (res.confirm) {
				uni.setStorageSync('token','')
				uni.showToast({
					title: '已退出登录',
					icon: 'none',
					success:res=>{
						store.commit('update_uid','')
						store.commit('update_name','')
						store.commit('update_home','')
						uni.reLaunch({
							url:'/pages/mine/mine'
						})
					}
				})
				
			}
		}
	})
}
</script>

<style>
	.update-pass-page{
		height: calc(100vh - 94px);
		background-color: #f8f8f8;
		overflow-y: scroll;
	}
.center-content {
		margin: auto;
		height: 150rpx;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* position: relative; */
		padding: 20rpx 0 ;
	}

	.imgs {
		display: flex;
		padding: 0 30rpx;

	}

	.imgs>view {
		margin-top: 30rpx;
		margin-left: 20rpx;
	}

	.imgs p {
		font-size: 30rpx;
		color: #8a8a8a;
	}



	.text>span {
		font-size: 10rpx;
		margin-left: 40rpx;
	}

	.center-content image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		border: 5px solid #fff;
		margin-right: 20rpx;
		margin-bottom: 90rpx;
	}
	
	/* 账号名 */
	.center-content span {
		font-weight: 300;
		font-size: 40rpx;
	}
	
	/*其它 */
	.root-wrap{
		height: 900rpx;
		/* height: calc(100vh - 300px); */
		background-color: #fff;
		margin-top: 20rpx;
	}
	.mine-page {
		/* background-color: bisque; */
		height: calc(100vh - 94px);
		padding-top: 10px;
		box-sizing: border-box;
	}
	
	.info-wrap {
		padding: 20px;
		background-color: #F8F8F8;
		display: flex;
	
	}
	
	.info-wrap>image {
		width: 160rpx;
		height: 160rpx;
	}
	
	.info-wrap>text {
		font-size: 44rpx;
		font-weight: bold;
		margin-left: 20px;
		margin-top: 10px;
	}
	.mine-item{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #ccc;
	}
	/* 更换密码 */
	.mine-page {
		/* background-color: bisque; */
		height: calc(100vh - 94px);
		padding-top: 10px;
		box-sizing: border-box;
	}
	.navigator{
		border-bottom: 1px solid #ccc;
		background-color: #8a8a8a;
	}
	/* 退出登录 */
	.van-button{
		position: absolute;
		bottom: 0px;
	}
</style>
